<template>
	<view class="fui-wrap" :style="`padding-bottom:${safebottom}rpx;`">
		<fui-nav-bar title="功能菜单" splitLine size="16"></fui-nav-bar>
		<fui-card v-if="bar && bar.records.length>0" :src="`${baseUrl}assets/img/miniapp/records.png`" :width="40" :height="40" title="停车记录" :margin="['20rpx','18rpx','0','18rpx']">
			<view class="bar">
				<view class="item" v-for="(item,index) in bar.records" :key="index" @click="goPage(item)">
					<view class="imagebox">
						<image :src="`${baseUrl}assets/img/miniapp/${item.icon}`" :style="`width: ${item.width || 60}rpx;height: ${item.height || 60}rpx;`" mode="widthFix"></image>
					</view>
					<fui-text :text="item.title" color="#000" :size="24"></fui-text>
				</view>
			</view>
		</fui-card>
		<fui-card v-if="bar && bar.cars.length>0" :src="`${baseUrl}assets/img/miniapp/car.png`" :width="40" :height="40" title="车辆管理" :margin="['20rpx','18rpx','0','18rpx']">
			<view class="bar">
				<view class="item" v-for="(item,index) in bar.cars" :key="index" @click="goPage(item)">
					<view class="imagebox">
						<image :src="`${baseUrl}assets/img/miniapp/${item.icon}`" :style="`width: ${item.width || 60}rpx;height: ${item.height || 60}rpx;`" mode="widthFix"></image>
					</view>
					<fui-text :text="item.title" color="#000" :size="24"></fui-text>
					<view class="tips">
						<fui-badge v-if="item.tips" type="danger" :value="item.tips"></fui-badge>
					</view>
				</view>
			</view>
		</fui-card>
		<fui-card v-if="bar && bar.merchant.length>0" :src="`${baseUrl}assets/img/miniapp/merchant.png`" :width="40" :height="40" title="商家管理" :margin="['20rpx','18rpx','0','18rpx']">
			<view class="bar">
				<view class="item" v-for="(item,index) in bar.merchant" :key="index" @click="goPage(item)">
					<view class="imagebox">
						<image :src="`${baseUrl}assets/img/miniapp/${item.icon}`" :style="`width: ${item.width || 60}rpx;height: ${item.height || 60}rpx;`" mode="widthFix"></image>
					</view>
					<fui-text :text="item.title" color="#000" :size="24"></fui-text>
				</view>
			</view>
		</fui-card>
		<fui-card v-if="bar && bar.finance.length>0" :src="`${baseUrl}assets/img/miniapp/fapiao.png`" :width="40" :height="40" title="财务管理" :margin="['20rpx','18rpx','0','18rpx']">
			<view class="bar">
				<view class="item" v-for="(item,index) in bar.finance" :key="index" @click="goPage(item)">
					<view class="imagebox">
						<image :src="`${baseUrl}assets/img/miniapp/${item.icon}`" :style="`width: ${item.width || 60}rpx;height: ${item.height || 60}rpx;`" mode="widthFix"></image>
					</view>
					<fui-text :text="item.title" color="#000" :size="24"></fui-text>
					<view class="tips">
						<fui-badge v-if="item.tips" type="danger" :value="item.tips"></fui-badge>
					</view>
				</view>
			</view>
		</fui-card>
		<toolbar :current="2" ref="toolbar"></toolbar>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import toolbar from './components/toolbar.vue';
	export default {
		components:{
			toolbar:toolbar
		},
		data() {
			return {
				baseUrl:baseUrl,
				safebottom:0,
				bar:'',
			}
		},
		onLoad() {
			this.$get('parking/index/menu').then(res=>{
				this.bar=res;
			});
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom*2+100+30;
			  }
			});
		},
		methods: {
			...methods,
			goPage:function(item){
				let menus=uni.getStorageSync('clickMenu') || [];
				let b=false;
				for(let i=0;i<menus.length;i++){
					if(menus[i].page==item.page){
						menus[i].click++;
						b=true;
					}
				}
				if(!b){
					item.click=1;
					menus.push(item);
				}
				uni.setStorageSync('clickMenu',menus);
				this.$navigateTo(item.page);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-wrap{
		
	}
	.pannel{
		background-color: #fff;
		padding:30rpx 0rpx;
		min-height: 200rpx;
		margin-top: 20rpx;
	}
	.bar{
		display: flex;
		align-items: center;
		padding-top: 28rpx;
		flex-wrap: wrap;
		.item{
			width: 20%;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			.imagebox{
				height: 60rpx;
				width: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.tips{
				position: absolute;
				right: 30rpx;
				top: -10rpx;
			}
		}
	}
</style>